<template>
  <div class="admin-dashboard">
    <!-- 左侧菜单 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>Shoes On Line后台管理</h2>
      </div>
      
      <div class="menu">
        <!-- 主页 -->
        <div class="menu-item" @click="selectMenuItem('主页')" :class="{ active: activeMenu === '主页' }">
          <i class="icon">🏠</i>
          <span>主页</span>
        </div>

        <!-- 商品管理 -->
        <div class="menu-group">
          <div class="menu-item group-header" @click="toggleGroup('product')" :class="{ active: openGroups.product }">
            <i class="icon">📦</i>
            <span>商品管理</span>
            <i class="arrow" :class="{ rotated: openGroups.product }">▼</i>
          </div>
          <div class="submenu" v-show="openGroups.product">
            <div class="submenu-item" @click="selectMenuItem('商品列表')" :class="{ active: activeMenu === '商品列表' }">
              商品列表
            </div>
            <div class="submenu-item" @click="selectMenuItem('品牌列表')" :class="{ active: activeMenu === '品牌列表' }">
              品牌列表
            </div>
            <div class="submenu-item" @click="selectMenuItem('类型列表')" :class="{ active: activeMenu === '类型列表' }">
              类型列表
            </div>
            <div class="submenu-item" @click="selectMenuItem('颜色列表')" :class="{ active: activeMenu === '颜色列表' }">
              颜色列表
            </div>
            <div class="submenu-item" @click="selectMenuItem('尺寸列表')" :class="{ active: activeMenu === '尺寸列表' }">
              尺寸列表
            </div>
            <div class="submenu-item" @click="selectMenuItem('库存管理')" :class="{ active: activeMenu === '库存管理' }">
              库存管理
            </div>
          </div>
        </div>

        <!-- 订单管理 -->
        <div class="menu-group">
          <div class="menu-item group-header" @click="toggleGroup('order')" :class="{ active: openGroups.order }">
            <i class="icon">📋</i>
            <span>订单管理</span>
            <i class="arrow" :class="{ rotated: openGroups.order }">▼</i>
          </div>
          <div class="submenu" v-show="openGroups.order">
            <div class="submenu-item" @click="selectMenuItem('待发货订单')" :class="{ active: activeMenu === '待发货订单' }">
              待发货订单
            </div>
            <div class="submenu-item" @click="selectMenuItem('运输中订单')" :class="{ active: activeMenu === '运输中订单' }">
              运输中订单
            </div>
            <div class="submenu-item" @click="selectMenuItem('交易成功的订单')" :class="{ active: activeMenu === '交易成功的订单' }">
              交易成功的订单
            </div>
            <div class="submenu-item" @click="selectMenuItem('申请退货订单')" :class="{ active: activeMenu === '申请退货订单' }">
              申请退货订单
            </div>
            <div class="submenu-item" @click="selectMenuItem('已退货订单')" :class="{ active: activeMenu === '已退货订单' }">
              已退货订单
            </div>
            <div class="submenu-item" @click="selectMenuItem('已取消订单')" :class="{ active: activeMenu === '已取消订单' }">
              已取消订单
            </div>
          </div>
        </div>

        <!-- 用户管理 -->
        <div class="menu-group">
          <div class="menu-item group-header" @click="toggleGroup('user')" :class="{ active: openGroups.user }">
            <i class="icon">👥</i>
            <span>用户管理</span>
            <i class="arrow" :class="{ rotated: openGroups.user }">▼</i>
          </div>
          <div class="submenu" v-show="openGroups.user">
            <div class="submenu-item" @click="selectMenuItem('用户列表')" :class="{ active: activeMenu === '用户列表' }">
              用户列表
            </div>
          </div>
        </div>

        <!-- 查看报表 -->
        <div class="menu-group">
          <div class="menu-item group-header" @click="toggleGroup('report')" :class="{ active: openGroups.report }">
            <i class="icon">📊</i>
            <span>查看报表</span>
            <i class="arrow" :class="{ rotated: openGroups.report }">▼</i>
          </div>
          <div class="submenu" v-show="openGroups.report">
            <div class="submenu-item" @click="selectMenuItem('业绩报表')" :class="{ active: activeMenu === '业绩报表' }">
              业绩报表
            </div>
            <div class="submenu-item" @click="selectMenuItem('营销报表')" :class="{ active: activeMenu === '营销报表' }">
              营销报表
            </div>
            <div class="submenu-item" @click="selectMenuItem('流量报表')" :class="{ active: activeMenu === '流量报表' }">
              流量报表
            </div>
          </div>
        </div>

        <!-- 企业管理 -->
        <div class="menu-group">
          <div class="menu-item group-header" @click="toggleGroup('enterprise')" :class="{ active: openGroups.enterprise }">
            <i class="icon">🏢</i>
            <span>企业管理</span>
            <i class="arrow" :class="{ rotated: openGroups.enterprise }">▼</i>
          </div>
          <div class="submenu" v-show="openGroups.enterprise">
            <div class="submenu-item" @click="selectMenuItem('合作链接管理')" :class="{ active: activeMenu === '合作链接管理' }">
              合作链接管理
            </div>
            <div class="submenu-item" @click="selectMenuItem('广告管理')" :class="{ active: activeMenu === '广告管理' }">
              广告管理
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="main-content">
      <div class="content-header">
        <div class="header-left">
          <h1>{{ activeMenu || '欢迎使用后台管理系统' }}</h1>
          <div class="breadcrumb">
            <span>当前位置：{{ activeMenu || '主页' }}</span>
          </div>
        </div>
        <div class="header-right">
          <div class="user-info" v-if="userInfo">
            <div class="user-avatar" :class="{ 'menu-open': showUserMenu }" @click="showUserMenu = !showUserMenu">
              <span class="avatar-text">{{ userInfo.username.charAt(0).toUpperCase() }}</span>
            </div>
            <div class="user-details">
              <div class="user-name">{{ userInfo.username }}</div>
              <div class="user-role">{{ getRoleText(userInfo.role) }}</div>
            </div>
            <div class="user-actions">
              <button class="action-btn" @click="showUserMenu = !showUserMenu">
                <i class="icon">⚙️</i>
              </button>
              <div class="user-menu" v-show="showUserMenu">
                <button 
                  type="button" 
                  class="menu-item" 
                  @click="handleProfile"
                  @mousedown="console.log('个人资料按钮 mousedown')"
                  @mouseup="console.log('个人资料按钮 mouseup')"
                  style="border: none !important; background: transparent !important; width: 100% !important; text-align: left !important; position: relative; z-index: 999999; pointer-events: auto !important; cursor: pointer !important;">
                  <i class="icon">👤</i>
                  <span>个人资料</span>
                </button>
                <button 
                  type="button" 
                  class="menu-item" 
                  @click="handleSettings"
                  @mousedown="console.log('系统设置按钮 mousedown')"
                  @mouseup="console.log('系统设置按钮 mouseup')"
                  style="border: none !important; background: transparent !important; width: 100% !important; text-align: left !important; position: relative; z-index: 999999; pointer-events: auto !important; cursor: pointer !important;">
                  <i class="icon">⚙️</i>
                  <span>系统设置</span>
                </button>
                <div class="menu-divider"></div>
                <button 
                  type="button"
                  class="menu-item logout" 
                  @click="handleLogout"
                  @mousedown="console.log('退出登录按钮 mousedown')"
                  @mouseup="console.log('退出登录按钮 mouseup')"
                  style="border: none !important; background: transparent !important; width: 100% !important; text-align: left !important; position: relative; z-index: 999999; pointer-events: auto !important; cursor: pointer !important;">
                  <i class="icon">🚪</i>
                  <span>退出登录</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="content-body">
        <div class="content-card" v-if="!getActiveComponent()">
          <div class="content-text">
            {{ activeMenu || '请从左侧菜单选择功能' }}
          </div>
        </div>
        
        <!-- 动态组件渲染 -->
        <component 
          :is="getActiveComponent()" 
          v-if="getActiveComponent()" 
          :product-data="editingProduct"
          :active-menu="activeMenu"
          @navigate="selectMenuItem"></component>
      </div>
    </div>
  </div>
</template>

<script>
import HomePage from './admin/HomePage.vue';
import ProductList from './admin/ProductList.vue';
import AddProduct from './admin/AddProduct.vue';
import ProductDetail from './admin/ProductDetail.vue';
import BrandList from './admin/BrandList.vue';
import TypeList from './admin/TypeList.vue';
import ColorList from './admin/ColorList.vue';
import SizeList from './admin/SizeList.vue';
import StockManagement from './admin/StockManagement.vue';
import PendingOrders from './admin/PendingOrders.vue';
import OrderManagement from './admin/OrderManagement.vue';
import UserList from './admin/UserList.vue';
import PerformanceReport from './admin/PerformanceReport.vue';
import MarketingReport from './admin/MarketingReport.vue';
import TrafficReport from './admin/TrafficReport.vue';
import PartnerLinks from './admin/PartnerLinks.vue';
import AdManagement from './admin/AdManagement.vue';

export default {
  name: 'AdminDashboard',
  props: {
    userInfo: {
      type: Object,
      default: null
    }
  },
  components: {
    HomePage,
    ProductList,
    AddProduct,
    ProductDetail,
    BrandList,
    AddBrand: () => import('./admin/AddBrand.vue'),
    TypeList,
    AddType: () => import('./admin/AddType.vue'),
    ColorList,
    AddColor: () => import('./admin/AddColor.vue'),
    SizeList,
    AddSize: () => import('./admin/AddSize.vue'),
    StockManagement,
    PendingOrders,
    OrderManagement,
    UserList,
    PerformanceReport,
    MarketingReport,
    TrafficReport,
    PartnerLinks,
    AdManagement
  },
  data() {
    return {
      activeMenu: '主页',
      showUserMenu: false,
      editingProduct: null, // 用于存储正在编辑的产品数据
      openGroups: {
        product: false,
        order: false,
        user: false,
        report: false,
        enterprise: false
      }
    };
  },
  methods: {
    selectMenuItem(menuName, productData = null) {
      this.activeMenu = menuName;
      this.showUserMenu = false; // 关闭用户菜单
      
      // 如果是编辑产品或查看产品详情，保存产品数据
      if ((menuName === '编辑产品' || menuName === '产品详情') && productData) {
        this.editingProduct = productData;
      } else if (menuName !== '编辑产品' && menuName !== '产品详情') {
        this.editingProduct = null;
      }
      
      // 处理产品管理相关的导航
      const productMenuMap = {
        '商品列表': '/product-management/products',
        '品牌列表': '/product-management/brands',
        '类型列表': '/product-management/types',
        '颜色列表': '/product-management/colors',
        '尺寸列表': '/product-management/sizes',
        '库存管理': '/product-management/stock'
      };
      
      if (productMenuMap[menuName]) {
        const targetRoute = productMenuMap[menuName];
        // 检查当前路由是否已经是目标路由，避免重复导航
        if (this.$route.path !== targetRoute) {
          this.$router.push(targetRoute).catch(err => {
            // 忽略导航重复错误
            if (err.name !== 'NavigationDuplicated') {
              console.error('路由导航错误:', err);
            }
          });
        }
      }
    },
    toggleGroup(groupName) {
      this.openGroups[groupName] = !this.openGroups[groupName];
    },
    getRoleText(role) {
      const roleMap = {
        'admin': '系统管理员',
        'manager': '管理员',
        'user': '普通用户'
      };
      return roleMap[role] || '用户';
    },
    handleProfile() {
      this.showUserMenu = false;
      // 这里可以添加个人资料页面逻辑
      alert('个人资料功能开发中...');
    },
    handleSettings() {
      this.showUserMenu = false;
      // 这里可以添加系统设置页面逻辑
      alert('系统设置功能开发中...');
    },
    async handleLogout() {
      console.log('退出登录按钮被点击');
      this.showUserMenu = false;
      
      // 使用更友好的确认对话框
      if (!confirm('确定要退出登录吗？\n退出后需要重新登录才能访问管理系统。')) {
        console.log('用户取消退出登录');
        return;
      }
      
      console.log('用户确认退出登录');

      try {
        // 显示加载状态
        this.showToast('正在退出登录...', 'info');
        
        // 调用后端退出登录接口
        const response = await fetch('http://localhost:8083/admin/logout', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
        });

        if (response.ok) {
          const result = await response.json();
          if (result.code === 200 || result.ok === true) {
            // 退出成功
            this.showToast('退出登录成功', 'success');
            
            // 延迟一下再触发退出，让用户看到成功提示
            setTimeout(() => {
              this.$emit('logout');
            }, 800);
          } else {
            throw new Error(result.msg || '退出登录失败');
          }
        } else {
          throw new Error('网络请求失败');
        }
      } catch (error) {
        console.error('退出登录失败:', error);
        
        // 即使后端请求失败，也要清除前端状态
        this.showToast('正在退出登录...', 'info');
        
        setTimeout(() => {
          this.$emit('logout');
        }, 800);
      }
    },

    // 添加消息提示方法
    showToast(message, type = 'info') {
      // 创建提示元素
      const toast = document.createElement('div');
      toast.className = `toast toast-${type}`;
      toast.textContent = message;
      
      // 添加样式
      Object.assign(toast.style, {
        position: 'fixed',
        top: '20px',
        right: '20px',
        padding: '12px 20px',
        borderRadius: '6px',
        color: 'white',
        fontSize: '14px',
        fontWeight: '500',
        zIndex: '10000',
        opacity: '0',
        transform: 'translateX(100%)',
        transition: 'all 0.3s ease',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)'
      });

      // 根据类型设置背景色
      const colors = {
        success: '#10b981',
        error: '#ef4444',
        warning: '#f59e0b',
        info: '#3b82f6'
      };
      toast.style.backgroundColor = colors[type] || colors.info;

      // 添加到页面
      document.body.appendChild(toast);

      // 显示动画
      setTimeout(() => {
        toast.style.opacity = '1';
        toast.style.transform = 'translateX(0)';
      }, 100);

      // 自动移除
      setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateX(100%)';
        setTimeout(() => {
          if (document.body.contains(toast)) {
            document.body.removeChild(toast);
          }
        }, 300);
      }, 3000);

      return toast;
    },
    getActiveComponent() {
       const componentMap = {
         '主页': 'HomePage',
         '商品列表': 'ProductList',
         '添加产品': 'AddProduct',
         '编辑产品': 'AddProduct',
         '产品详情': 'ProductDetail',
         '品牌列表': 'BrandList',
         'AddBrand': 'AddBrand',
         '类型列表': 'TypeList',
         'AddType': 'AddType',
         '颜色列表': 'ColorList',
         'AddColor': 'AddColor',
         '尺寸列表': 'SizeList',
         'AddSize': 'AddSize',
         '库存管理': 'StockManagement',
         '待发货订单': 'OrderManagement',
         '运输中订单': 'OrderManagement',
         '交易成功的订单': 'OrderManagement',
         '申请退货订单': 'OrderManagement',
         '已退货订单': 'OrderManagement',
         '已取消订单': 'OrderManagement',
         '用户列表': 'UserList',
         '业绩报表': 'PerformanceReport',
         '营销报表': 'MarketingReport',
         '流量报表': 'TrafficReport',
         '合作链接管理': 'PartnerLinks',
         '广告管理': 'AdManagement'
       };
       return componentMap[this.activeMenu] || null;
     }
  },
  mounted() {
    // 点击外部关闭用户菜单
    this.handleClickOutside = (e) => {
      if (!e.target.closest('.user-info') && !e.target.closest('.user-actions')) {
        this.showUserMenu = false;
      }
    };
    document.addEventListener('click', this.handleClickOutside);
    
    // 按ESC键关闭用户菜单
    this.handleKeyDown = (e) => {
      if (e.key === 'Escape') {
        this.showUserMenu = false;
      }
    };
    document.addEventListener('keydown', this.handleKeyDown);
  },
  
  beforeUnmount() {
    // 清理事件监听器
    if (this.handleClickOutside) {
      document.removeEventListener('click', this.handleClickOutside);
    }
    if (this.handleKeyDown) {
      document.removeEventListener('keydown', this.handleKeyDown);
    }
  },
  
  beforeUnmount() {
    // Vue 3 兼容
    if (this.handleClickOutside) {
      document.removeEventListener('click', this.handleClickOutside);
    }
    if (this.handleKeyDown) {
      document.removeEventListener('keydown', this.handleKeyDown);
    }
  }
};
</script>

<style scoped>
.admin-dashboard {
  display: flex;
  height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 左侧菜单样式 */
.sidebar {
  width: 300px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: white;
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.sidebar-header {
  padding: 25px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(10px);
  position: relative;
}

.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  border-radius: 2px;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.menu {
  padding: 15px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 25px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  margin: 2px 10px;
  border-radius: 12px;
}

.menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff6b6b, #4ecdc4);
  border-radius: 0 4px 4px 0;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.menu-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.menu-item:hover::before {
  transform: scaleY(1);
}

.menu-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  transform: translateX(8px);
}

.menu-item.active::before {
  transform: scaleY(1);
}

.menu-item .icon {
  margin-right: 15px;
  font-size: 18px;
  width: 24px;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.menu-item span {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.group-header {
  justify-content: space-between;
}

.arrow {
  font-size: 14px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.arrow.rotated {
  transform: rotate(180deg);
  color: #4ecdc4;
}

.submenu {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
  backdrop-filter: blur(5px);
  border-radius: 0 0 12px 12px;
  margin: 0 10px 5px 10px;
  animation: slideDown 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 400px;
    transform: translateY(0);
  }
}

.submenu-item {
  padding: 12px 25px 12px 60px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 14px;
  color: #e0e6ed;
  position: relative;
  border-radius: 8px;
  margin: 3px 10px;
}

.submenu-item::before {
  content: '•';
  position: absolute;
  left: 45px;
  color: #4ecdc4;
  font-size: 16px;
  transition: all 0.3s ease;
}

.submenu-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  color: #ffffff;
  transform: translateX(5px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.submenu-item:hover::before {
  color: #ff6b6b;
  transform: scale(1.2);
}

.submenu-item.active {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  transform: translateX(8px);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.submenu-item.active::before {
  color: white;
  transform: scale(1.3);
}

/* 右侧内容区样式 */
.main-content {
  flex: 1;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;
  position: relative;
}

.main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23ffffff" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23ffffff" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

.content-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  backdrop-filter: blur(20px);
  padding: 25px 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
}

.header-left h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
  color: #2c3e50;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.breadcrumb {
  font-size: 15px;
  color: #6c757d;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.user-info:hover .user-avatar {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.user-avatar:active {
  transform: scale(0.98);
}

.user-avatar.menu-open {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  border-color: rgba(255, 255, 255, 1);
}

.user-avatar.menu-open::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  z-index: -1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 80px;
}

.user-name {
  font-weight: 700;
  color: #2c3e50;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-role {
  font-size: 12px;
  color: #667eea;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-actions {
  position: relative;
  z-index: 10000;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-btn .icon {
  font-size: 14px;
}

.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 999999;
  overflow: visible;
  pointer-events: auto;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: white;
  border: 1px solid #e0e0e0;
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: -1;
}

.user-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer !important;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  border: none !important;
  margin: 0;
  pointer-events: auto !important;
  user-select: none;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
  border-radius: 0;
}

.user-menu .menu-item:hover {
  background: #f5f5f5 !important;
}

.user-menu .menu-item.logout {
  color: #dc3545 !important;
}

.user-menu .menu-item.logout:hover {
  background: #fff5f5 !important;
}

.user-menu .menu-item.logout:active {
  background: #ffe6e6 !important;
}

.user-menu .menu-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
  margin: 8px 12px;
}

.user-menu .icon {
  font-size: 16px;
  width: 18px;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.content-body {
  flex: 1;
  padding: 35px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.content-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.3);
  
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  pointer-events: none;
}

.content-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.content-text {
  font-size: 28px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

/* 滚动条美化 */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #667eea, #764ba2);
  border-radius: 3px;
}

.content-body::-webkit-scrollbar {
  width: 8px;
}

.content-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.content-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #667eea, #764ba2);
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 280px;
  }
  
  .sidebar-header h2 {
    font-size: 18px;
  }
  
  .content-header {
    padding: 20px 25px;
  }
  
  .content-header h1 {
    font-size: 24px;
  }
  
  .content-body {
    padding: 25px;
  }
  
  .content-card {
    padding: 35px 25px;
  }
  
  .content-text {
    font-size: 24px;
  }
}

/* 添加一些微动画 */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.menu-item.active {
  animation: float 3s ease-in-out infinite;
}
</style>